import { useContext } from "react";
import { dragActiveStyle, DragIndexContext, DragIndexState } from "./utils";

interface TableBodyCellProps
  extends React.HTMLAttributes<HTMLTableCellElement> {
  id: string;
}

const TableBodyCell: React.FC<TableBodyCellProps> = (props) => {
  const dragState = useContext<DragIndexState>(DragIndexContext);

  return (
    <td
      {...props}
      style={{ ...props.style, ...dragActiveStyle(dragState, props.id) }}
    />
  );
};

export default TableBodyCell;
